<template>
  <div class="container">
    <repairCommonTitle title="缺陷" iconName="defectWorkIcon" />
    <div ref="target" class="content"></div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import repairCommonTitle from "./repairCommonTitle.vue";

// 1. 初始化echarts实例
let myChart = null;
const target = ref(null);

let colorList = ["#00EEFF", "#FFE100", "#00FF2B", "#FF6FC0", "#FF5E00"];
// 颜色预处理函数
const setTransparency = (hexColor, alpha) => {
  const r = parseInt(hexColor.slice(1, 3), 16);
  const g = parseInt(hexColor.slice(3, 5), 16);
  const b = parseInt(hexColor.slice(5, 7), 16);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};
let data = [
  {
    name: "道路设施异常",
    data: [
      { value: 43, name: "2021" },
      { value: 100, name: "2022" },
      { value: 60, name: "2023" },
      { value: 32, name: "2024" },
    ],
  },
  {
    name: "设施损坏",
    data: [
      { value: 21, name: "2021" },
      { value: 0, name: "2022" },
      { value: 78, name: "2023" },
      { value: 68, name: "2024" },
    ],
  },
  {
    name: "路面积水",
    data: [
      { value: 56, name: "2021" },
      { value: 28, name: "2022" },
      { value: 100, name: "2023" },
      { value: 33, name: "2024" },
    ],
  },
  {
    name: "违规施工",
    data: [
      { value: 72, name: "2021" },
      { value: 93, name: "2022" },
      { value: 87, name: "2023" },
      { value: 52, name: "2024" },
    ],
  },
  {
    name: "路面病害",
    data: [
      { value: 13, name: "2021" },
      { value: 71, name: "2022" },
      { value: 60, name: "2023" },
      { value: 46, name: "2024" },
    ],
  },
];
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart();
});
// 2. 构建options配置对象
const renderChart = () => {
  const options = {
    color: colorList,
    backgroundColor: "#011730",
    legend: {
      top: "16",
      icon: "rect",
      itemWidth: 24,
      itemHeight: 4,
      // itemGap: 30,
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: true,
        axisLabel: {
          show: true,
          interval: 0, // 强制显示所有标签
          color: "#fff", // 标签颜色需与背景区分
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 3,
            color: "rgba(1, 28, 54, 1)",
          },
        },
        data: ["2021", "2022", "2023", "2024"],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "条",
        nameGap: 15, // 名称与轴线间距
        nameTextStyle: {
          color: "#fff",
          fontSize: 16,
        },
        min: 0, // 明确设置Y轴范围
        max: 100,
        interval: 20, // 固定刻度间隔为20
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
          formatter: "{value}", // 去除小数位
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#A6DAFF", // 网格线颜色
            type: "dashed", // 网格线虚线[3](@ref)
            width: 1, // 网格线宽度
          },
        },
      },
    ],
    series: data.map((item, index) => {
      return {
        name: item.name,
        type: "line",
        smooth: true,
        symbol: "none",
        symbolSize: 8,
        zlevel: 3,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(0, 0, 0, 0)",
              },
              {
                offset: 1,
                color: setTransparency(colorList[index], 0), // 透明度设为0
              },
            ],
            global: false,
          },
        },
        data: item.data.map((item) => item.value),
      };
    }),
  };
  myChart.setOption(options);
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 3px solid #2366ad;
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
  }
}
</style> 